<template>
	<view :class="{bodyView:true,show:_showToast,hide:!_showToast}" :data-theme="dataTheme">
		<view class="toastView">
			<image class="tipimg" src="@/static/icons/listdone.png"></image>
			<text>{{title||'Success'}}</text>
			<text v-if="detail" class="detailText">{{detail}}</text>
		</view>
	</view>
</template>

<script setup>
	import bottomBarVue from './bottomBar.vue';
	import useSystemStore from '@/store/modules/system'
	const systemStore = useSystemStore()
	const {
		dataTheme,
	} = storeToRefs(systemStore);
	const emit = defineEmits(['update:modelValue']);
	const props = defineProps({
		/**title */
		title: {
			type: String,
			default: 'Success'
		},
		/**detail */
		detail: {
			type: String,
			default: ''
		},
		/**是否显示 */
		modelValue: {
			type: Boolean,
			default: false
		},
	})
	
	const _showToast = computed({
		get: () => { 
			if(props.modelValue)
				setTimeout(()=>{
					_showToast.value=false
				},2000)
			return props.modelValue
		},
		set: (val) => {
			emit('update:modelValue', val)
		}
	}); 
</script>

<style lang="scss" scoped>
	.bodyView {
		position: absolute;
		width: 100vw;
		height: 100vh;
		z-index: 10000;
		top: 0;
		@include flex-teng;


		background: linear-gradient(to top right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));

		backdrop-filter: blur(20px);
		background-size: 33.3vw 33.3vw;
		opacity: 1;
		transform-origin: center;
		transform: scale(0);
		transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
		&.show{
			transform: scale(1);
		}
		&.hide{
			opacity: 0 !important;
		}
	}

	.toastView {
		border-radius: $mainPadding;
		width: calc(100vw - $mainPadding * 4);
		padding: $mainPadding;
		@include flex-teng(column);
		row-gap: $mainPadding;

		@include useTheme {
			background-color: getValue("bgColor");
			color: getValue("textColor");
		}

		.tipimg {
			width: 134rpx;
			height: 134rpx;
		}

		.detailText {
			font-size: $fontSize3;
			color: 0.8;
		}
	}
</style>